{% extends 'wxchat/wxbase.html' %}{% load static %}

{% block tabpanel %}
        <div class="weui-tab__content" id="tab1">
            <div class="weui-panel weui-panel_access">
                <div class="weui-panel__hd">
                     <div class="weui-flex">
                            <div class="weui-flex__item"><span class="title">宠物领养列表</span></div>
                            <div class="weui-flex__item"></div>
                            <div class="weui-flex__item"><a href="{% url 'dog-index' %}?next={{ request.get_full_path }}"><i class="icon iconfont icon-shouye2 pink r" ></i></a></div>
                     </div>
                </div>
                <div class="weui-panel__bd" id="dogadopt"></div>
                <div class="weui-panel__ft">
                    <a href="javascript:void(0);" class="weui-cell weui-cell_access weui-cell_link" id="doglossmore" style="display: none">
                        <div class="weui-cell__bd">查看更多</div>
                        <span class="weui-cell__ft"></span>
                    </a>
                </div>
            </div>
        </div>
        <div class="weui-tab__content" id="tab2">
            <div class="weui-panel weui-panel_access">
                <div class="weui-panel__hd">
                     <div class="weui-flex">
                            <div class="weui-flex__item"><span class="title">宠物送养列表</span></div>
                            <div class="weui-flex__item"></div>
                            <div class="weui-flex__item"><a href="{% url 'dog-index' %}?next={{ request.get_full_path }}"><i class="icon iconfont icon-shouye2 pink r" ></i></a></div>
                     </div>
                </div>
                <div class="weui-panel__bd" id="dogdelivery"></div>
                <div class="weui-panel__ft" >
                    <a href="javascript:void(0);" class="weui-cell weui-cell_access weui-cell_link" id="dogdeliverymore" style="display: none">
                        <div class="weui-cell__bd">查看更多</div>
                        <span class="weui-cell__ft"></span>
                    </a>
                </div>
            </div>
        </div>
{% endblock tabpanel %}
 {% block tabbar %}
        <a href="#tab1" class="weui-tabbar__item">
            <div class="weui-tabbar__icon">'
                <i class="icon iconfont icon-lingyang"></i>
            </div>
            <p class="weui-tabbar__label">宠物领养</p>
        </a>
        <a href="#tab2" class="weui-tabbar__item">
            <div class="weui-tabbar__icon">
                <i class="icon iconfont icon-pet5"></i>
            </div>
            <p class="weui-tabbar__label">宠物送养</p>
        </a>

{% endblock tabbar %}
{% block add %}
{#    {% url 'dog-adopt-nav' %}?next={{ request.get_full_path }}#}
    <a id="pet_adopt" class="circle" href="javascript:;">
          <div class="circle_icon"><i class="icon iconfont icon-zengjia16"></i></div>
          <p>发布</p>
    </a>
{% endblock add %}
{% block bottomjs %}
    {{ block.super }}
    <script type="application/javascript">
     nextUrl = '{% url 'dog-adopt-list' %}';
     dogdeliveryUrl = '{% url 'dog-delivery-list' %}';
     var loading = weui.loading('加载中...');
     ///缓存滚动条位置
     $('.weui-tab__panel').scroll(function(){
            if($(this).scrollTop() !=0 ){
                sessionStorage.setItem('offsetTop',$(this).scrollTop());
            }
    });

    $(function(){

        defIndex = sessionStorage.getItem('adopt');
        console.log('defindex='+ defIndex);
        weui.tab('#tab',{
            defaultIndex: defIndex ==null?0:defIndex,
            onChange: function(index){
                sessionStorage.setItem('adopt',index);
            }
        });


        $('#dogadoptmore').on('click',function(){
            getDataList( nextUrl );
        });

        $('#dogdeliverymore').on('click',function(){
            getdeliveryList( dogdeliveryUrl );
        });
        getDataList( nextUrl );
        getdeliveryList(dogdeliveryUrl);

    });
    function getDataList(url){
        $.ajax({
          type: 'GET',
          url: url,
          dataType: 'json',
          timeout: 5000,
          context: $('#dogadopt'),
          success: function(data){
              nextUrl = data.next;
              appendItem(data.results);
              if(nextUrl == null)
                $('#doglossmore').css('display','none');
              else
                 $('#doglossmore').css('display','');
              loading.hide();
              setScollPos();
          },
          error: function(xhr, type,error){
              console.log(type);
              loading.hide();
          }
        });
    }

    function appendItem(results){
        $.each(results,function(index,item){
            lossitem =  '<a href="/wechat/dogadoptdetail/' + item.id + '">' +
                            '<div class="weui-media-box weui-media-box_text">' +
                               '<h4 class="weui-media-box__title">'+ item.name +'</h4>' +
                                '<p class="weui-media-box__desc">宠物要求: '+ item.requirement +'</p>' +
                             '</div>' +
                        '</a>';
            $('#dogadopt').append( lossitem );
        }) ;
    }

    function getdeliveryList(url){
        $.ajax({
          type: 'GET',
          url: url,
          dataType: 'json',
          timeout: 5000,
          context: $('#dogdelivery'),
          success: function(data){
              dogdeliveryUrl = data.next;
              appenddeliveryItem(data.results);
              if(dogdeliveryUrl == null)
                $('#dogdeliverymore').css('display','none');
              else
                 $('#dogdeliverymore').css('display','');
              loading.hide();
              setScollPos();
          },
          error: function(xhr, type,error){
              console.log(type);
          }
        });
    }

    function appenddeliveryItem(results){
        $.each(results,function(index,item){
           var img_url = item.thumb_url;

            if(img_url == null){
                img_url = '<i class="icon iconfont icon-pet6  weui-media-box__thumb" ></i>';
            }
            else {
                img_url = '<img class="weui-media-box__thumb" src="' + img_url + '">'
            }
            sexImage = getSexImage(item);
            lossitem =  '<a  href="/wechat/dogdeliverydetail/' + item.id + '" class="weui-media-box weui-media-box_appmsg">' +
                            '<div class="weui-media-box__hd">' + img_url + '</div>'+
                            '<div class="weui-media-box__bd">' +
                               '<h4 class="weui-media-box__title">'+ sexImage + item.typeid +'</h4>' +
                               '<p class="weui-media-box__desc">宠物要求: '+ item.desc +'</p>' +
                             '</div>' +
                        '</a>';
            $('#dogdelivery').append( lossitem );
        }) ;
    }
    ////设置滚动条位置
    function setScollPos(){
        var _offset = sessionStorage.getItem("offsetTop");//获取滚动位置
        $('.weui-tab__panel').scrollTop(_offset);
    }

     $('#pet_adopt').on("click",function(){
            weui.actionSheet([
             {
                 label: '<i class="icon iconfont icon-lingyang icon_pink"></i> 宠物领养',
                 className:'color-primary',
                 onClick: function () {
                     window.location.href="{% url 'dog-adopt-add' %}?next={{ request.get_full_path }}";
                 }
             }, {
                 label: '<i class="icon iconfont icon-pet5 icon_pink"></i> 宠物送养',
                 className:'color-success',
                 onClick: function () {
                     window.location.href="{% url 'dog-delivery-add' %}?sex=1&next={{ request.get_full_path }}";
                 }
             },
             ]);
        });

    </script>
{% endblock bottomjs %}
